<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <!--360浏览器优先以webkit内核解析-->
    <title>攻击概率评估系统</title>
    <link href="favicon.ico" rel="shortcut icon">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link href="../static/css/font-awesome.min.css" rel="stylesheet" th:href="@{/css/font-awesome.min.css}"/>
    <link href="../static/css/main/animate.min.css" rel="stylesheet" th:href="@{/css/main/animate.min.css}"/>
    <link href="../static/css/main/style.min862f.css" rel="stylesheet" th:href="@{/css/main/style.min862f.css}"/>
</head>
<style>
    .col-md-3{
        width:260px;
        /*height:100px;*/
        padding: 20px 0;
        text-align:center;
        display:table-cell;
        vertical-align:middle;
        margin: 0 8px;
    }
    h3{
        color:#ffffff;
    }
    h4{
        color:#ffffff;
    }
    .gray-bg{
        margin-top: 20px;
    }
    .container{
        background-color: #f3f3f4;
    }
    .col-sm-12{
        margin-bottom: 20px;

    }
    .col-md-12{
        margin-top: 20px;
    }
</style>

<body class="gray-bg">

<div class="container">

    <div class="col-sm-12" >
         <div class="col-md-3" style="background:#58A3F7">
             <h4>评估数量</h4>
             <h3 id="totalAttackAmount">123</h3>
         </div>
         <div class="col-md-3" style="background:#FFB800">
             <h4>昨日新增评估</h4>
             <h3 id="yesterdayAttackAmount">123</h3>
         </div>
         <div class="col-md-3" style="background:#01AAED">
             <h4>七日内新增评估</h4>
             <h3 id="sevenDaysAttacksAmount">123</h3>
         </div>
         <div class="col-md-3" style="background:#FB6260">
             <h4>高概率攻击数量</h4>
             <h3 id="highRateAttackAmount">123</h3>
         </div>
    </div>
    <div>
    <div class="col-md-6" style="background:#FFFFFF">
        <h3>攻击概率分析</h3>
        <div id="attackLevel" style="width:400px;height:350px;"></div>
    </div>
    <div class="col-md-6" style="background:#FFFFFF">
        <h3>攻击类型分析</h3>
        <div id="attackType" style="width:400px;height:350px;"></div>
    </div>
    </div>
    <div class="col-md-12" style="background:#FFFFFF">
        <h3>评估数量走势</h3>
        <div id="attackAmountLine" style="width: 1000px;height:400px;"></div>
    </div>


</div>
</body>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
<script th:inline="javascript">

    $(function () {
        var attackMainData = parent.attackDataToMain();
       /*  //评估数量
         var totalAttackAmount = attackMainData[0];
         //昨日新增评估
         var yesterdayAttackAmount = attackMainData[1];
         //7日内新增评估
         var sevenDaysAttacksAmount = attackMainData[2];
         //高攻击概率数量
         var highRateAttackAmount = attackMainData[3];*/
        //评估数量
        $('#totalAttackAmount').text(attackMainData[0]);
        //昨日新增评估
        $('#yesterdayAttackAmount').text(attackMainData[1]);
        //7日内新增评估
        $('#sevenDaysAttacksAmount').text(attackMainData[2]);
        //高攻击概率数量
        $('#highRateAttackAmount').text(attackMainData[3]);
        //攻击概率饼图
        inintAttackLevelPies(attackMainData);
        //攻击类型饼图
        inintAttackTypePies(attackMainData);
        //初始化评估数量走势折线图
        inintAttackAmountLine(attackMainData);


    })


    /**
     * 初始化攻击概率饼图
     * @param attackMainData
     */
    function inintAttackLevelPies(attackMainData) {
        var attackLevelPie = echarts.init(document.getElementById('attackLevel'));

        //攻击概率数据
        var attackLevelData = attackMainData[4];

        //攻击概率数组
        var attackLevels = [];
        attackLevelData.forEach(function (val, index, arr) {
            attackLevels[index] = val;
        })

        option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                bottom: '2%',
                left : "center",
                data: attackLevels
            },
            series: [
                {
                    name: '攻击概率',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['60%', '40%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: attackLevelData
                }
            ]
        };

        //初始化
        attackLevelPie.setOption(option);
    }


    /**
     * 初始化攻击类型饼图
     * @param attackMainData
     */
    function inintAttackTypePies(attackMainData) {
        var attackTypePie = echarts.init(document.getElementById('attackType'));

        //攻击类型数据
        var attackTypeData = attackMainData[5];

        //攻击类型数组
        var attackNames = [];
        attackTypeData.forEach(function (val, index, arr) {
            attackNames[index] = val;
        })

        option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                bottom: '2%',
                data: attackNames
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['60%', '40%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: attackTypeData
                }
            ]
        };

        //初始化
        attackTypePie.setOption(option);
    }


    /**
     * 初始化评估数量走势折线图
     * @param attackMainData
     */
    function inintAttackAmountLine(attackMainData) {
        var attackAmountLine = echarts.init(document.getElementById('attackAmountLine'));

        //折线图月份
        var attackMonths = attackMainData[6];
        //折线图攻击次数
        var attackAmountEverMonth = attackMainData[7];

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#FFFFFF'
                    }
                }
            },
            legend: {
                data: ['评估数量'],
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: attackMonths
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '评估数量',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: attackAmountEverMonth
                }
            ]
        };


        attackAmountLine.setOption(option)

    }


    $('#pay-qrcode').click(function () {
        var html = $(this).html();
        parent.layer.open({
            title: false,
            type: 1,
            closeBtn: false,
            shadeClose: true,
            area: ['600px', 'auto'],
            content: html
        });
    });
</script>
</html>
